---
title: Using Saas UI in Storybook
description: A guide for using Saas UI with Storybook
---

## Installation

:::steps

### Install dependencies

Install the required dependencies for Saas UI and Storybook.

```bash
npm i @storybook/addon-themes @saas-ui/react@next @chakra-ui/react @emotion/react
```

### Setup Preview

Edit the `.storybook/preview.tsx` file to include the Saas UI provider.

```tsx
import { SuiProvider, defaultSystem } from '@saas-ui/react'
import type { Preview } from '@storybook/react'

const preview: Preview = {
  // ...
  decorators: [
    (Story) => (
      <SuiProvider value={defaultSystem}>
        <Story />
      </SuiProvider>
    ),
  ],
}

export default preview
```

### Setup dark mode toggle

Use the `withThemeByClassName` decorator from `@storybook/addon-themes` to add a
color mode toggle to the Storybook toolbar.

```tsx
import { withThemeByClassName } from '@storybook/addon-themes'
import type { Preview, ReactRenderer } from '@storybook/react'

const preview: Preview = {
  decorators: [
    // ...
    withThemeByClassName({
      defaultTheme: 'light',
      themes: { light: '', dark: 'dark' },
    }),
  ],
}

export default preview
```

### Start the Storybook server

```bash
npm run storybook
```

### Enjoy!

Use Saas UI components in your stories.

```tsx
import { Button } from '@saas-ui/react'

export const SampleStory = {
  render() {
    return <Button>Click me</Button>
  },
}
```

:::
